<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>添加故障报修-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
</head>
<body ontouchstart>
	<div class="weui_tab tab-bottom">
		<div class="weui_tab_bd">
			<div class="weui-header bg-blue"> 
				<div class="weui-header-left"> <a onclick="back()" class="icon icon-109 f-white">返回</a></div>
				<h1 class="weui-header-title">故障报修</h1>
			</div>
	        <div class="weui_cells"style="margin: 0;">
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label"><i class="icon icon-85 f20 f-blue"></i> 报修人</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<p>${user.teacher.name }</p>
					</div>
				</div>
			</div>
	        
			<div class="weui_cells weui_cells_form">
				<div class="weui_cell weui_cell_select weui_select_after">
					<div class="weui_cell_hd">
						<label class="weui_label"><i class="icon icon-69 f20 f-blue"></i> 建筑物</label>
					</div>
	                <div class="weui_cell_bd weui_cell_primary">
                		<select class="weui_select" id="buildingName" name="buildingName" onchange="getBuildingNumber()">
	                        <option value="">请选择</option>
	                    </select>
            		</div>
	            </div>
				<div class="weui_cell weui_cell_select weui_select_after">
					<div class="weui_cell_hd">
						<label class="weui_label"><i class="icon icon-67 f20 f-blue"></i> 楼层</label>
					</div>
	                <div class="weui_cell_bd weui_cell_primary">
	                    <select class="weui_select" id="buildingNumber" name="buildingNumber">
	                        <option value="">请选择</option>
	                    </select>
	                </div>
	            </div>
	            <div class="weui_cell weui_cell_select weui_select_after">
					<div class="weui_cell_hd">
						<label class="weui_label"><i class="icon icon-67 f20 f-blue"></i> 故障类别</label>
					</div>
	                <div class="weui_cell_bd weui_cell_primary">
	                    <select class="weui_select" id="repairType" name="repairType">
	                        <option value="">请选择</option>
	                    </select>
	                </div>
	            </div>
	            <div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label"><i class="icon icon-5 f20 f-blue"></i> 详细地点</label>
					</div>
	                <div class="weui_cell_bd weui_cell_primary">
	                		<input id="repairPlace" name="repairPlace" class="weui_input" placeholder="请输入故障详细地点"/>
	            		</div>
	            </div>
	            <div class="weui_cell xtbg-add-list-title">
					<div class="weui_cell_bd weui_cell_primary">
						<p class="f14">故障详细描述</p>
					</div>
				</div>
	            <div class="weui_cell">
	                <div class="weui_cell_bd weui_cell_primary">
	                    <textarea id="faultDesc" name="faultDesc" class="weui_textarea" placeholder="请详细描述损坏情况" rows="3"></textarea>
	                    
	                </div>
	            </div>
	            <div class="weui_uploader">
                       
                       <div class="weui_uploader_bd">
                           <ul class="weui_uploader_files img-click" id='img1'>
                            
                           </ul>
                           <div class="weui_uploader_input_wrp" id="filePicker" style="margin-bottom: 20px; margin-left: 15px; width: 60px; height: 60px; border-radius: 5px;">
                               <!-- <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="imgid"/> -->
                           </div>
                       </div>
	            </div>
	        </div>
	       <div class="weui_btn_area">
		        <a href="javascript:" id="btnSubmit" class="weui_btn bg-blue">确认提交</a>
		    </div>
		</div>
	</div>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	$(function() {
		initRepairType();
		initRepairBuilding();
		$("#btnSubmit").click(function() {
			submit();
		})
	})
	function initRepairType() {
		$.ajax({
			url: basePath + '/ls/fail/repaire/repairType',
			type: 'post',
			dataType: 'json',
			success: function(data) {
				if(data != null && data.length > 0) {
					var html = '';
					for(var i in data) {
						html += '<option value="'+data[i].typeName+'">'+data[i].typeName+'</option>';
					}
					$("#repairType").append(html);
				}
			},
            error: function(xhr, type){
            	$.toptips("系统异常");
            }
		});
	}
	var buildMap = new Map();
	function initRepairBuilding() {
		$.ajax({
			url: basePath + '/ls/fail/repaire/repairBuilding',
			type: 'post',
			dataType: 'json',
			success: function(data) {
				if(data != null && data.length > 0) {
					var html = '';
					for(var i in data) {
						buildMap.set(data[i].buildingName, parseInt(data[i].buildingNumber));
						html += '<option value="'+data[i].buildingName+'">'+data[i].buildingName+'</option>';
					}
					$("#buildingName").append(html);
				}
			},
            error: function(xhr, type){
            	$.toptips("系统异常");
            }
		});
	}
	function getBuildingNumber() {
		$("#buildingNumber").val('');
		var v = $("#buildingName").val();
		var buildingNumber = buildMap.get(v);
		var html = '';
		if(buildingNumber) {
			for(var i = 1; i <= buildingNumber; i++) {
				html += '<option value="'+i+'楼">'+i+'楼</option>';
			}
		}else {
			html = '<option value="">请选择</option>';
		}
		$("#buildingNumber").append(html);
	}
	function submit() {
		var buildingName = $("#buildingName").val();
		if(buildingName.length == 0) {
			$.alert("请选择建筑物!","");
			return;
		}
		var buildingNumber = $("#buildingNumber").val();
		if(buildingNumber.length == 0) {
			$.alert("请选择楼层!","");
			return;
		}
		var repairType = $("#repairType").val();
		if(repairType.length == 0) {
			$.alert("请选择故障类别!","");
			return;
		}
		var repairPlace = $("#repairPlace").val();
		if(repairPlace.length == 0) {
			$.alert("请输入故障详细地点!","");
			return;
		}
		var faultDesc = $("#faultDesc").val();
		if(faultDesc.length == 0) {
			$.alert("请输入故障详细描述!","");
			return;
		}
		var attachIds = "";
		var imgList = $("#img1").find("li");
		if(imgList.length > 0) {
			imgList.each(function(i,v){
				var id = $(v).attr("data-id");
				attachIds += id;
				if((i+1) < imgList.length) {
					attachIds += ",";
				}
			});
		}
		$.ajax({
			url: basePath + '/ls/fail/repaire/addRepair/submit',
			type: 'post',
			dataType: 'json',
			data: {
				buildingName: buildingName,
				buildingNumber: buildingNumber,
				repairType: repairType,
				repairPlace: repairPlace,
				faultDesc: faultDesc,
				attachIds: attachIds
			},
			success: function(data) {
				if (data.code == '000') {
					$.toast("提交成功！");
					window.location.href = basePath + "/ls/fail/repaire";
				} else {
					$.toptips(data.msg);
				}
			},
            error: function(xhr, type){
            	$.toptips("系统异常");
            }
		});
	}
	/* document.querySelector('#imgid').onchange = function(e) {
		var files = e.target.files;
		var len = files.length;
		for (var i=0; i < len; i++) {
			lrz(files[i], {
				width:1080
			})
			.then(function (rst) {
				var xhr = new XMLHttpRequest();
	            xhr.open('POST', basePath + "/ls/attchment/upload/lrz");
	            xhr.onload = function () {
	                if (xhr.status === 200) {
	                	var obj = JSON.parse(xhr.response)
	                	$("#img1").append('<li class="weui_uploader_file" data-id="'+obj.data.id+'" onclick="imgClick(this)" style="margin-right:0;margin-bottom:10px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img src="'+ rst.base64 +'"/></li>')
	                }
	            };
	            xhr.onerror = function () {
	            	$.toptips("上传异常");
	            };
	            xhr.upload.onprogress = function (e) {
	                // 上传进度
	                var percentComplete = ((e.loaded / e.total) || 0) * 100;
	            };
	            // 添加参数
	            rst.formData.append('attachmentName', rst.origin.name);
	            rst.formData.append('attachmentSize', rst.fileLen);
	            rst.formData.append('baseData', rst.base64);
	            rst.formData.append('attachmentType', "image");
	            rst.formData.append('relationType', "failRepair");
	            // 触发上传
	            xhr.send(rst.formData);
	            return rst;
			})
	        .always(function () {
	            // 不管是成功失败，都会执行
	        });
			;
		}
	} */

	//拍照或从手机相册中选图接口
	$('#filePicker').on('click', function () {
		wx.chooseImage({
		    count: 9,
		    needResult: 1,
		    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
		    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		    success: function (res) {
		   		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
		   		wxuploadImage(localIds);
		    },
		    fail: function (res) {
		        alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
		    }
		
		});
	});
	function wxuploadImage(localIds) {  
		var localId = localIds.pop();
		wx.uploadImage({  
		    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得  
		    isShowProgressTips: 1, // 默认为1，显示进度提示  
		    success: function (res) {  
		        mediaId = res.serverId; // 返回图片的服务器端ID
		        wechatMediaDownload(mediaId);
		        if(localIds.length > 0){
		        	wxuploadImage(localIds);
		        }
		    },  
		    fail: function (error) {  
		        alert(Json.stringify(error));  
		    }  
		});
	}  
	function wechatMediaDownload(mediaId) {
		var params = {};
		params.mediaId = mediaId;
		params.attachmentType = "image";
		params.relationType = "failRepair";
		$.ajax({
			url : basePath + "/ls/attchment/upload/wx",
			type : "post",
			data : params,
			dataType : "json",
			async : false,
			success : function(data) {
				if(data.code != '000') {
					$.toast(data.msg, "cancel");
				}else {
					$('#img1').append('<li class="weui_uploader_file" data-id="'+data.data.id+'" style="margin-right:0;margin-bottom:16px;position:relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data.data.attachmentUrl +'"/></li>'); 
				}
			}, error:function(){
				$.toptips("上传异常");
				}
		});
	}
	
</script>
</body>
</html>